<template>
    <div class="header">
        <div class="header-left">
            <span class="iconfont icon-left"></span>
        </div>
        <div class="header-input">
            <span class="iconfont icon-search"></span>
            输入城市/游玩/景点
        </div>
        <router-link to="/city">
            <div class="header-right">
                <span class="header-right-city">
                    {{this.city}}
                </span>
            </div>
        </router-link>
    </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
    name: 'HomeHeader',
    computed: {
        // vuex提供的API，可以直接将vuex中的数据直接映射到computed属性中
        ...mapState(['city'])
    }
}
</script>

<style lang="stylus" scoped>
    @import '~styles/varibles.styl'
    /**1rem = html font-size =50px 因为是2倍屏所以是相当于86/100 */
    .header
        display: flex
        line-height: $headerHeight
        background: $bgColor
        color: #fff
        .header-left
            width: .80rem
            float: left
            text-align: center
        .header-input
            flex: 1
            height: .64rem
            line-height: .64rem
            margin-top: .12rem
            margin-left: .2rem
            background: #fff
            border-radius: .1rem
            color: #ccc
            text-align: center
        .header-right
            min-width: 1.04rem
            padding: 0 .1rem
            float: right
            text-align: center
            color: white
            .header-right-city
                // align-content: center;
                display:flex
                justify-content: center
                align-items: center
            .header-right-city::after
                // display不改会显示为长方形
                display: inline-block
                margin-left: 0.05rem
                content:''
                // 下三角
                width: 0
                height: 0
                line-height: 0
                border: 0.1rem solid
                border-color: #fff transparent transparent
</style>
